<template>
    <div class="unread_messages_box outer_shadows">
        <div class="unread_messages_header">
            <div class="unread_messages_header_title">
                <span class="unread_messages_title">消息列表({{ store.state.commentsSize }})</span>
                <span @click="allRead" class="unread_messages_allRead">全部已读删除</span>
            </div>

            <button @click="next" class="unread_messages_but">加载更多</button>
        </div>

        <div class="unread_messages_body">
            <ul>
                <li class="unread_messages_list" v-for="(item,index) in unreadList" :key="index">
                    <div class="unread_messages_avatar">
                        <img :src="digital.avatar(item.email)" alt="">
                        <span class="unread_messages_size">1</span>
                    </div>

                    <div class="unread_messages_body">
                        <div class="unread_messages_info">
                            <p class="unread_messages_body_name">@{{ item.username }}</p>
                            <p>{{ dayjs(item.time).format(base.timeFormat) }}</p>
                        </div>
                        <p class="unread_messages_body_content">{{ item.content }}</p>
                        <span @click="toDetail(item.eid,item.id)" class="unread_messages_detail">点击查看详情</span>
                    </div>
                </li>
            </ul>
        </div>
        <button @click="shut_down" class="unread_messages_shut_down">X</button>
        <p class="unread_messages_msg">温馨提示：已阅读的消息会被系统删除！</p>
    </div>
</template>

<script setup>

//加载更多评论
import store from "../../store/index.js";
import digital from "@/config/methods/digital.js";
import {onMounted, ref} from "vue";
import api from "@/request/index.js";
import base from "@/config/constant/constant.js"
import dayjs from "dayjs";

//加载更多评论内容
const next = () => {
    if(store.state.commentsSize<=0){
        store.commit('info_sub',{msg:"当前没有可加载消息!",type:"normal"})
    }
    current.value += 1;
    getData();
};

//当前第几页,初始化第一页
const current = ref(1);


//展示评论列表数据
const unreadList = ref([
    {
        id: 1,
        eid: "",
        browser: "",
        systems: "",
        uid: 0,
        pid: "",
        replyId: 0,
        username: "",
        emil: "",
        time: new Date(),
        content: ""
    }
]);

//关闭消息窗口
const shut_down = () => {
    store.commit('unread_messages', false);
}

//已读
const allRead = () => {
    if(store.state.commentsSize<=0){
        store.commit('info_sub',{msg:"当前没有可删除消息!",type:"normal"})
    }
    api.readComment().then((res)=>{
        unreadList.value = [];
        store.commit('commentsSize', 0);
        store.commit('info_sub',{msg:"消息已全部删除！",type:"normal"})
    });
}

//跳转文章详情
const toDetail = (eid, id) => {
    api.readComment(id).then((res) => {
        if (res.data.code === 200) {
            store.commit('commentsSize', store.state.commentsSize - 1);
        }
    });
    window.open("#/articleDetails?id=" + eid, "_blank")
}

//预加载
onMounted(() => {
    unreadList.value = [];
    getData();
});

//获取未读信息列表
const getData = () => {
    api.getUnread(current.value).then((res) => {
        if (res.data.code === 200 && res.data.data && res.data.data.length > 0) {
            unreadList.value = unreadList.value.concat(res.data.data);
        } else  if (res.data.code !== 200) {
            store.commit('info_sub', {msg: res.data.msg, type: "warn"});
        }
    })
}

</script>

<style scoped>
.unread_messages_box {
    box-shadow: 0 0 3px #606162;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 500px;
    height: 500px;
    padding: 20px 15px;
    border-radius: 2px;

}

ul {
    display: inline-block;
    height: 100%;
    width: 100%;
    padding: 10px;
    list-style: none;
}

.unread_messages_body {
    height: 90%;
    width: 100%;
    display: inline-block;
    overflow: auto;
}

.unread_messages_body::-webkit-scrollbar {
    width: 5px;
}

.unread_messages_body::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #6da6e1;
}

.unread_messages_body::-webkit-scrollbar-track {
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
}

.unread_messages_list {
    display: flex;
    margin: 0 0 20px;
}

.unread_messages_list img {
    width: 40px;
    height: 40px;
    border-radius: 3px;
    margin-right: 10px;
}

.unread_messages_body {
    width: 100%;
}

.unread_messages_info {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.unread_messages_avatar {
    position: relative;
}

.unread_messages_title {
    display: inline-block;
    padding-left: 10px;
    border-left: 3px solid #6da6e1;
}

.unread_messages_size {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: white;
    background: #e03939;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
}

.unread_messages_body_content, .unread_messages_body_name {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 14px;
    margin: 0 0 5px;
}

.unread_messages_body_name {
    width: 50%;
}

.unread_messages_but {
    outline: none;
    cursor: pointer;
    height: 25px;
    padding: 0 10px;
    border: 1px solid #6da6e1;
    background: transparent;
    color: #6da6e1;
    transition: all .3s;
}

.unread_messages_header {
    display: flex;
    justify-content: space-between;

}

.unread_messages_but:hover {
    background: #509eec;
    color: white;
    border: 1px solid transparent;
}

.unread_messages_shut_down {
    position: absolute;
    top: 0;
    right: 0;
    background: #6da6e1;
    color: white;
    outline: none;
    border: 0;
    height: 15px;
    text-align: center;
    width: 20px;
    font-size: 14px;
    line-height: 15px;

}

.unread_messages_shut_down:hover {
    cursor: pointer;
    opacity: .8;
}

.unread_messages_detail {
    font-size: 13px;
    color: #6da6e1;
}

.unread_messages_detail:hover {
    cursor: pointer;
    text-decoration: underline;
}

.unread_messages_msg {
    position: absolute;
    bottom: 2px;
    left: 5px;
    font-size: 13px;
    color: #6da6e1;
}
.unread_messages_allRead{
    color: #6da6e1;
    font-size: 13px;
    margin-left: 10px;
}
.unread_messages_allRead:hover{
    cursor: pointer;
    text-decoration: underline;
}
.unread_messages_header_title{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
</style>